<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <!-- 十七。添加addTask自定义事件，对应的函数是addTaskFn -->
    <!-- 三十八。 :list="list"   38 39 40 41-->
    <!-- 四十二。 @checkedAll="checkedAll" -->
    <TodoHeader :list="list" @addTask="addTaskFn" @checkAll="checkAll"></TodoHeader>
    <!--① :list="list" 后面的list对应data里的list-->
    <!--⑨ @del="delFn" -->
    <!-- 十三。@change="changeFn" -->
    <!-- 三十一。引号里的list换成show.List -->
    <TodoMain :list="showList" @del="delFn" @change="changeFn"></TodoMain>
    <!-- 二十。 :list="list" -->
    <!-- 二十四。  @clear="clearFn"   24 25 26 27-->
    <!-- 三十二。   :type="type"   32  33-->
    <!-- 三十四。 @changeType="changeTypeFn"   34  35  36  37 有问题-->
    <TodoFooter :list="list"  @clear="clearFn" :type="type" @changeType="typeFn"></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      //五十一。把写死的list换成
      list: JSON.parse(localStorage.getItem('todolist'))||[],
      // [
      //   { id: 100, name: "吃饭", isDone: true },
      //   { id: 101, name: "睡觉", isDone: false },
      //   { id: 102, name: "打豆豆", isDone: true },
      // ],
      //二十九。  29 29.1 30 31 
      type:'all' //all表示全部，yes表示完成，no表示未完成
    };
  },
  //三十。
  computed:{
    showList(){
      if(this.type==="yes"){
        return this.list.filter(item=>item.isDone)
      }else if(this.type==="no"){
        return this.list.filter(item=>!item.isDone)
      }else{
        return this.list
      }
    }
  },
  //⑩
  methods:{
    checkAll(val){
      console.log('checkAll',val);
      this.list.forEach(item=>item.isDone=val)
    },
    delFn(id){
      //console.log('触发了delFn',id);
      this.list=this.list.filter(item=>item.id!==id)
    },
    //十四。
    changeFn(id){
      console.log(id);
      const res=this.list.find(item=>item.id===id)
      res.isDone=!res.isDone
    },
    //十九。
    addTaskFn(task){
      //console.log('addTaskFn',task);
      this.list.push({
        id:this.list.length?this.list.at(-1).id+1:100,
        name:task,
        isDone:false
      })
    },
    //二十五。
    clearFn(){
      console.log('clearFn');
      //二十八。写完后可实现点击清除已完成时会清除左边打勾的
      this.list=this.list.filter(ele=>ele.isDone)
    },
    //三十五。
    changeTypeFn(){
      //三十七。
      this.type=type

    }
  },
  //五十。  50  51
  watch:{
    list:{
      deep:true,
      handler(newVal){
        localStorage.setItem('todolist',JSON.stringify(newVal))
      }
    }
  }
};
</script>